<template>
	<div class="useropinion">
		<div class="useropinionTitle">个人资料</div>
		<div class="mymessageText">
			<div class="mymessageText-one"><span>当前头像：</span><span><img :src="userinfor.userpic" alt=""></span><label class="usertx">修改<input type="file" @change="getFile($event)" :name="userinfor.userphone"></label></div>
			<div class="mymessageText-two"><span>昵称：</span><input type="text" :value="userinfor.userphone" disabled="true"></div>
			<div class="mymessageText-three">
				<span>性别：</span>
				<label class="bui-radios-label">
					<input type="radio" name="sex" :checked="checked==1" class="sex"><i class="bui-radios"></i>男
				</label>
				<label class="bui-radios-label bui-radios-label2">
					<input type="radio" name="sex" :checked="checked==2" class="sex"><i class="bui-radios"></i>女
				</label>
			</div>
			<div class="mymessageText-four"><span>生日：</span><data3and ref="mesage"></data3and></div>
			<div class="mymessageText-five"><span>手机：</span><input type="text" :value="userinfor.userphone" disabled="disabled"><span class="mymessageText-one-color"><router-link to="/myself/mymessage/changephone1">更换手机</router-link></span></div>
			<div class="mymessageText-six" @click="mymessagesub">确认提交</div>
		</div>
	</div>
</template>

<script>
	import data3and from '../components1/data3and.vue'
	export default {
		components:{data3and},
		data(){
			return{
				userinfor:null,
				checked:null,
				// userpic:null,
			}
		},
		created(){
			this.userinfor=this.$store.state.userinfor;
			this.checked=this.$store.state.userinfor.usersex;
		},
		methods:{
			mymessagesub(){
				// var _this=this;
				var userbornyear=this.$refs.mesage.yearsModel;
				var userbornmonth=this.$refs.mesage.monthsModel;
				var userbornday=this.$refs.mesage.daysModel;
				var inputs=document.getElementsByClassName('sex');
				var usersex=null;
				if(inputs[0].checked){
					usersex=1;
				}else if(inputs[1].checked){
					usersex=2
				}
				this.$axios.post("http://localhost:3000/userinfor/mesage",{userphone:this.userinfor.userphone,usersex:usersex,userbornyear:userbornyear,userbornmonth:userbornmonth,userbornday:userbornday})
				.then(function(response){
					var list=response.data;
					if(list.code==200){
						alert('修改成功')
					}
				}).catch(function (error) {
					window.console.log(error);
				})
			},
			getFile(event) {
				this.file = event.target.files[0];  //获取上传元素信息
				// var that = this
				event.preventDefault();
				// 只能通过formData方式来传输文件
				var formData = new FormData();  
				formData.append('file', this.file);
				var config = {
					headers: {
						'Content-Type': 'multipart/form-data'
					}
				}
				this.$axios.post('http://localhost:3000/usertx', formData, config).then(function(res) {
					window.console.log(res)
					if (res.data.code == '0') {
						/*这里做处理*/  
						// that.userpic=res.data.fileUrl;  //   给avatar赋上新的值，否则要刷新获取
					}
				})
			},
			//头像上传请求
			// getFile(e){
			// 	// var _this=this;
			// 	var file=e.target.files[0];
			// 	e.preventDefault();
			// 	//通过FormData方式传输文件
			// 	var formData=new FormData();
			// 	//获取上传图片的数据
			// 	formData.append('file',file);
			// 	window.console.log(file);
			// 	window.console.log(formData);
			// 	// window.console.log(this.userinfor.userphone);
			// 	this.$axios({
			// 		method:'post',
			// 		url:'http://localhost:3000/usertx',
			// 		data:{
			// 			formData:formData,
			// 			userphone:this.userinfor.userphone,
			// 			},
			// 		headers:{'Content-Type':'multipart/form-data'}
			// 	}).then(function(response){
			// 		window.console.log(response)
			// 	})
			// }
		}
	}
</script>

<style>
	label.bui-radios-label input[type="radio"]{
		position: absolute;
		opacity: 0;
		visibility: hidden;
	}
	/*自定义radio*/
	label.bui-radios-label .bui-radios{
		display: inline-block;
		position: relative;
		width: 13px;
		height: 13px;
		background-color: #fff;
		border: 1px solid #979797;
		border-radius: 50%;
		vertical-align: -2px;
		margin-right: 5px;
	}
	/*单选框选中后，自定义radio的样式*/
	label.bui-radios-label input[type="radio"]:checked + .bui-radios:after{
		position: absolute;
		content: "";
		width: 7px;
		height: 7px;
		background-color: #fff;
		border-radius: 50%;
		top: 3px;
		left: 3px;
	}
	label.bui-radios-label input[type="radio"]:checked + .bui-radios{
		background-color: #00B066;
		border:1px solid #00B066;
	}
	label.bui-radios-label input[type="radio"]:disabled + .bui-radios{
		background-color: #e8e8e8;
		border:1px solid #979797;
	}
	label.bui-radios-label input[type="radio"]:disabled:checked + .bui-radios:after{
		background-color: #c1c1c1;
	}
	.bui-radios-label2{
		margin-left: 20px;
	}
	.mymessageText {
		color: #333333;
	}

	.mymessageText-one {
		width: 100%;
		height: 127px;
		font-size: 17px;

	}

	.mymessageText-one span {
		float: left;
	}

	.mymessageText-one span:nth-of-type(1) {
		margin-left: 3%;
		margin-top: 73px;
	}

	.mymessageText-one span:nth-of-type(2) {
		width: 80px;
		height: 80px;
		margin-top: 40px;
	}

	.mymessageText-one span:nth-of-type(3) {
		margin-top: 73px;
		margin-left: 10px;
	}
	.mymessageText-one img{
		width: 100%;
		height: 100%;
	}
	.mymessageText-two {
		width: 100%;
		margin-top: 12px;
		height: 40px;
		line-height: 40px;
	}

	.mymessageText-two span:nth-of-type(1) {
		float: left;
		margin-left: 5%;
	}

	.mymessageText-two input {
		width: 170px;
		height: 34px;
		border: 1px solid #C1C1C1;
	}

	.mymessageText-three,
	.mymessageText-four,
	.mymessageText-five {
		width: 100%;
		height: 56px;
		line-height: 56px;
	}

	.mymessageText-three span:nth-of-type(1) {
		float: left;
		margin-left: 5%;
	}

	.mymessageText-four span:nth-of-type(1) {
		float: left;
		margin-left: 5%;
	}

	.mymessageText-four select {
		width: 108px;
		height: 33px;
		outline: none;
	}

	.mymessageText-five span:nth-of-type(1) {
		float: left;
		margin-left: 5%;
	}

	.mymessageText-five input {
		width: 170px;
		height: 34px;
		outline: none;
		border: 1px solid #c1c1c1;
		margin-top: 6px;
	}
	.mymessageText-six{
		width: 150px;
		height: 48px;
		line-height: 48px;
		background: #f08200;
		text-align: center;
		font-size: 20px;
		color: white;
		border-radius: 5px;
		margin-top: 40px;
		margin-left: 10%;
		cursor: pointer;
	}
	.mymessageText-one-color{
		color: #a2c39d;
		margin-left: 5%;
	}
	.mymessageText-one-color a{
		color: #a2c39d;
	}
	.usertx{
		float: left;
		width: 34px;
		margin-top: 73px;
		color: #3FCE2C;
	}
	.usertx input{
		display: none;
	}
</style>
